<template>
  <div class="app-container machineContainer">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <!-- <el-form-item class="pull-right">
                    <span>机台总数 {{machine_num}} 台</span>
        </el-form-item>-->
        <el-form-item>
          <el-select
            filterable
            placeholder="选择门店"
            v-model="formInline.store_id"
            @change="storeChangeF"
            style="width:300px"
          >
            <el-option
              v-for="item in store_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select filterable placeholder="选择区域" v-model="formInline.area_id" style="width:100px">
            <el-option v-for="item in area_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-date-picker
            :editable="false"
            :clearable="false"
            v-model="pickerDate"
            value-format="yyyy.MM.dd"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width:240px"
          ></el-date-picker>
          <el-select filterable placeholder="选择类型" v-model="formInline.type_id" style="width:100px">
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table
        v-show="isStore==2"
        highlight-current-row
        :data="list"
        v-loading.body="listLoading"
        border
        size="small"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">{{scope.$index+1+(currentPage-1)*20}}</template>
        </el-table-column>
        <el-table-column align="center" label="门店" prop="name"></el-table-column>
        <el-table-column align="center" label="机台信息" width="200">
          <template slot-scope="scope">{{scope.row.area_name}} - {{scope.row.no}}</template>
        </el-table-column>
        <el-table-column align="center" label="机台ID" prop="id" width="150"></el-table-column>
        <el-table-column align="center" label="机台类型" prop="type_name" width="150"></el-table-column>
        <el-table-column align="center" label="开始余币" prop="start_coins" width="120"></el-table-column>
        <el-table-column align="center" label="结束余币" prop="end_coins" width="120"></el-table-column>
        <el-table-column align="center" label="存币数" prop="add_coins" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row,4)">{{scope.row.add_coins}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="清币数" prop="clear_coins" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row,3)">{{scope.row.clear_coins}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="清币差异"
          prop="different_coins"
          width="120"
          :render-header="(h,obj) => renderHeader(h,obj,'清币差异=结束余币+清币数-存币数-开始余币')"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              :class="scope.row.different_coins>0?'success':scope.row.different_coins<0?'danger':''"
              @click="showInfo(scope.row,3)"
            >{{scope.row.different_coins}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-show="isStore==0"
        highlight-current-row
        :data="list"
        v-loading.body="listLoading"
        border
        size="small"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">{{scope.$index+1+(currentPage-1)*20}}</template>
        </el-table-column>
        <el-table-column align="center" label="门店" prop="name"></el-table-column>
        <el-table-column align="center" label="机台信息" width="200">
          <template slot-scope="scope">{{scope.row.area_name}} - {{scope.row.no}}</template>
        </el-table-column>
        <el-table-column align="center" label="机台ID" prop="id" width="150"></el-table-column>
        <el-table-column align="center" label="机台类型" prop="type_name" width="150"></el-table-column>
        <el-table-column align="center" label="开始余币" prop="start_coins" width="120"></el-table-column>
        <el-table-column align="center" label="结束余币" prop="end_coins" width="120"></el-table-column>
        <el-table-column align="center" label="加币数" prop="add_coins" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row,1)">{{scope.row.add_coins}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="提币数" prop="user_coins" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row,2)">{{scope.row.user_coins}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="清币数" prop="clear_coins" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row,3)">{{scope.row.clear_coins}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="清币差异"
          prop="different_coins"
          width="120"
          :render-header="(h,obj) => renderHeader(h,obj,'清币差异=结束余币+清币数+提币数-加币数-开始余币')"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              :class="scope.row.different_coins>0?'success':scope.row.different_coins<0?'danger':''"
              @click="showInfo(scope.row,3)"
            >{{scope.row.different_coins}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹框 -->
      <!-- <el-dialog :close-on-click-modal="false" title="机台详细信息" :visible.sync="infoDialog" width="400px">
                <div style="font-size:16px;text-align:center">机台当前币数：{{currentCoins}}</div>
      </el-dialog>-->
      <!-- 弹框 -->
      <!-- <el-dialog :close-on-click-modal="false" :title="addTitle" :visible.sync="addDialog" width="600px" @close="callOf('saveForm')">
                <el-form :model="saveForm" :inline="true" ref="saveForm" :rules="rules"
                    style="width:760px;margin:0 auto;">
                    <el-form-item label="所属门店" prop="store_id">
                        <el-select style="width: 255px" size="mini"  v-model="saveForm.store_id" filterable :disabled="isAmend">
                            <el-option v-for="item in add_store_list" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属区域" prop="area_id">
                        <el-select style="width: 115px" size="mini"  v-model="saveForm.area_id" filterable :disabled="isAmend">
                            <el-option v-for="item in add_area_list" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机台类型" prop="type_id">
                        <el-select style="width: 255px" size="mini"  v-model="saveForm.type_id" filterable :disabled="isAmend">
                            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机台编号" prop="no">
                        <el-input size="mini" v-model="saveForm.no" placeholder="请输入机台编号" style="width: 115px" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveClick('saveForm')">保存</el-button>
                </div>
      </el-dialog>-->
    </div>

    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, getStore, getArea } from "@/api/operation/deviceInfo";
import {
  pickerOptionsF,
  pickerDateF,
  optionMaxTime,
  renderHeader,
} from "@/utils";
export default {
  data() {
    return {
      renderHeader,
      default_no: "",
      store_list: [], //筛选
      area_list: [], //筛选
      type_list: [
        { id: 0, name: "提币机" },
        { id: 2, name: "存币机" },
      ],
      list: null,
      listLoading: false,
      infoDialog: false,
      addDialog: false,
      isAmend: false,
      addTitle: "",
      currentPage: 1,
      totalDataNumber: 0,
      isStore: 1,
      formInline: {
        store_id: "",
        area_id: "",
        type_id: 0,
        start_time: "",
        end_time: "",
        page: 0,
      },
      infoData: {
        id: "",
        store_id: "",
        area_id: "",
        type_id: 2,
        name: "",
        area_name: "",
        type_name: "",
        no: "",
        start_time: "",
        end_time: "",
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF(),
      //addEditDialog: false,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.list) {
        vm.getStoreF(); //搜索条件的门店
      }
    });
  },
  methods: {
    getStoreF() {
      getStore({ category_id: 412 }).then((response) => {
        this.store_list = response;
        let data = response.filter(
          (res) => res.id == this.$store.getters.optionId
        );
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        this.fetchData();
        this.storeChangeF();
      });
    },
    storeChangeF() {
      //console.log(i,area_id,store_id,9999)
      getArea({ sid: this.formInline.store_id }).then((response) => {
        response.unshift({ id: "", name: "全部区域" });
        this.area_list = response;
        this.formInline.area_id = response[0].id;
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.formInline.start_time = this.pickerDate[0].replace(/\./g, "-");
      this.formInline.end_time = this.pickerDate[1].replace(/\./g, "-");
      this.infoData.start_time = this.formInline.start_time;
      this.infoData.end_time = this.formInline.end_time;
      //console.log(this.formInline)
      getList(this.formInline)
        .then((res) => {
          if (res.code == 1) {
            this.totalDataNumber = res.message.page_toal / 1;
            res.message.list.forEach((val) => {
              val.type_name = val.type_id == 2 ? "存币机" : "提币机";
              val.different_coins /= 1;
              val.different_coins =
                val.clear_coins_info.length == 0 ? "-" : val.different_coins;
              val.clear_coins =
                val.clear_coins_info.length == 0 ? "-" : val.clear_coins;
            });
            this.isStore = this.formInline.type_id;
            this.list = res.message.list;
          }
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.formInline.page = val - 1;
      getList(this.formInline).then((res) => {
        if (res.code == 1) {
          this.totalDataNumber = res.message.page_toal / 1;
          res.message.list.forEach((val) => {
            val.type_name = val.type_id == 2 ? "存币机" : "提币机";
            val.different_coins /= 1;
          });
          this.list = res.message.list;
        }
        this.listLoading = false;
      });
    },
    //明细
    showInfo(row, i) {
      //console.log(row);
      this.infoData.store_id = row.store_id;
      this.infoData.id = row.id;
      this.infoData.area_id = row.area_id;
      this.infoData.type_id = row.type_id;
      this.infoData.name = row.name;
      this.infoData.area_name = row.area_name;
      this.infoData.type_name = row.type_name;
      this.infoData.no = row.no;
      if (i == 1) {
        this.$router.push({
          name: "operation/addCoinsInfo",
          params: { data: this.infoData },
        });
      } else if (i == 2) {
        this.$router.push({
          name: "operation/userCoinsInfo",
          params: { data: this.infoData },
        });
      } else if (i == 3) {
        this.$router.push({
          name: "operation/clearCoinsInfo",
          params: { data: this.infoData },
        });
      } else if (i == 4) {
        this.$router.push({
          name: "operation/saveCoinsInfo",
          params: { data: this.infoData },
        });
      }
    },
  },
};
</script>
<style>
/* div.info_dialog{
        display: flex;
        padding-left:40px;
    }
    div.info_dialog>div{
        width: 250px;
        height: 40px;
    } */
</style>